<template>
  <div
    class="vue-flow__node-common" 
    :draggable="true" 
    @dragstart="onDragStart($event, type, initProp)"
  >
    <NodeIcon :name="type" :text="name" />
  </div>
</template>

<script setup>
import NodeIcon from '../../icon/NodeIcon.vue';
import { initNodeProp } from '../initProp';
import useDragAndDrop from '../useDnD';


const { onDragStart } = useDragAndDrop()

const type = ref('boolean')
const name = ref('布尔组件')

const initProp = ref(initNodeProp(type.value, name.value, ''))
</script>

<style>
.vue-flow__node-common{
  margin-block-end: 8px;
}

.vue-flow__node-common .icon-with-text{
  border: 1px solid #ddd;
  border-radius: 5px;
  padding-block: 5px;
  padding-inline: 2px;
}

.vue-flow__node-common:hover{
  border-radius: 5px;
  background-color: #ddd !important;
  color: #000;
}
</style>
